<template>
  <div class="common-layout">
    <el-container class="h-100%">
      <el-header class="h-15%">
        <el-row class="header-row">
          <el-col :span="6">
            <div class="header-title">
              {{ wpd1Obj?.titleMsg }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="header-title">
              {{ wpd2Obj?.titleMsg }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="header-title">
              {{ wpd3Obj?.titleMsg }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="header-title">
              {{ wpd4Obj?.titleMsg }}
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="h-85%">
        <el-row class="h-50%">
          <el-col :span="6" class="common-col">
            <div class="col-border col-coil" style="height: 35%">
              <el-input :value="wpd1Obj?.coilNo" readonly />
            </div>
            <div class="col-border col-range" style="height: 65%">
              <div></div>
              <div class="col-range--line"><span>下游距离</span></div>
              <div></div>
              <div><el-input :value="wpd1Obj?.range" readonly /></div>
            </div>
          </el-col>
          <el-col :span="6" class="common-col">
            <div class="col-border col-coil" style="height: 35%">
              <el-input :value="wpd2Obj?.coilNo" readonly />
            </div>
            <div class="col-border col-range" style="height: 65%">
              <div></div>
              <div class="col-range--line"><span>下游距离</span></div>
              <div></div>
              <div><el-input :value="wpd2Obj?.range" readonly /></div>
            </div>
          </el-col>
          <el-col :span="6" class="common-col">
            <div class="col-border col-coil" style="height: 35%">
              <el-input :value="wpd3Obj?.coilNo" readonly />
            </div>
            <div class="col-border col-range" style="height: 65%">
              <div></div>
              <div class="col-range--line"><span>下游距离</span></div>
              <div></div>
              <div><el-input :value="wpd3Obj?.range" readonly /></div>
            </div>
          </el-col>
          <el-col :span="6" class="common-col">
            <div class="col-border col-coil" style="height: 35%">
              <el-input :value="wpd4Obj?.coilNo" readonly />
            </div>
            <div class="col-border col-range" style="height: 65%">
              <div></div>
              <div class="col-range--line"><span>下游距离</span></div>
              <div></div>
              <div><el-input :value="wpd4Obj?.range" readonly /></div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang='ts'>

export type weldType = {
  titleMsg: string,
  coilNo: string,
  range: number,
}

defineProps<{
  wpd1Obj?: Partial<weldType> | null,
  wpd2Obj?: Partial<weldType> | null,
  wpd3Obj?: Partial<weldType> | null,
  wpd4Obj?: Partial<weldType> | null,
}>()

</script>
<style scoped lang="less">
.common-layout {
  height: 100%;
  padding: 0 4px;

  .header-row {
    height: 100%;
    background-color: #074ba5cf;
    box-shadow: 0 0 10px #0a6db4f2 inset;
    border-radius: 5px;

    .header-title {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }
  }

  .common-col {
    height: 100%;
    padding: 0 1px 0 0;
    font-size: 10px;

    .col-coil {
      height: 30%
    }

    .col-border {
      height: 90%;
      border: 1px solid #092aa9;
      border-radius: 2px;
      padding: 2px;
      align-items: center;

      .input-label {
        color: #fff;
        font-weight: 700;
        padding-left: 2px;
      }
    }

    .col-range {
      display: grid;
      grid-template-rows: 50% 50%;
      grid-template-columns: 50% 50%;
      padding: 2px;

      .col-range--line {
        text-align: center;
        padding-bottom: 1px;

        span {
          color: #fff;
          text-align: center;
          font-weight: 700;
        }
      }
    }
  }

}
</style>
<style scoped>
:deep(.el-header) {
  --el-header-padding: 0;
  padding: var(--el-header-padding);
  box-sizing: border-box;
  flex-shrink: 0;
}

:deep(.el-main) {
  --el-main-padding: 0;
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: var(--el-main-padding);
}

:deep(.el-row) {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
  padding: 1px 0 0 0;
}

:deep(.el-input) {
  --el-input-height: var(--el-component-size);
  position: relative;
  font-size: var(--el-font-size-base);
  display: inline-flex;
  width: var(--el-input-width);
  line-height: 100%;
  height: 100%;
  box-sizing: border-box;
  vertical-align: top;
}

:deep(.col-coil .el-input__wrapper) {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: #e18000;
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  cursor: text;
  transition: var(--el-transition-box-shadow);
  transform: translateZ(0);
  box-shadow: none;
}

:deep(.col-range .el-input__wrapper) {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: #00c8e6;
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  cursor: text;
  transition: var(--el-transition-box-shadow);
  transform: translateZ(0);
  box-shadow: none;
}

:deep(.el-input__inner) {
  --el-input-inner-height: 100%;
  width: 100%;
  flex-grow: 1;
  /* -webkit-appearance: none; */
  color: #000000;
  font-size: inherit;
  font-weight: 700;
  text-align: center;
  height: var(--el-input-inner-height);
  line-height: var(--el-input-inner-height);
  padding: 0;
  outline: 0;
  border: none;
  background: 0 0;
  box-sizing: border-box;
}
</style>